<template>
  <div class="container">
    <header>
      <!-- 标签栏 -->
      <van-tabs class="tabs" @click="onTabClick" v-model="activePath">
        <van-tab
          v-for="item in channelList"
          :key="item.id"
          :title="item.name"
          :name="item.id"
        />
      </van-tabs>
      <!-- 头部右侧功能区 -->
      <van-icon
        class="feature"
        size="20px"
        name="search"
        @click="goSearchPage"
      />
      <van-icon
        class="feature"
        size="20px"
        name="ellipsis"
        @click="showPopup"
      />
    </header>
    <!-- 更多 遮罩层 -->
    <van-popup
      v-model="popupShow"
      position="left"
      :style="{ height: '100%', width: '100%' }"
      closeable
      transition-appear
    >
      <div class="channel-container">
        <div class="channel">
          <div class="my-channel">
            <div>我的频道：</div>
            <span>点击进入频道</span>
          </div>
          <div class="edit-btn" @click="onEditing">
            {{ !isEditing ? "编辑" : "完成" }}
          </div>
        </div>
        <div class="channel-btn">
          <div
            v-for="(item, index) in channelList"
            :key="index"
            :class="{
              btn: true,
              active: activePath === item.id,
            }"
            @click="isEditing ? onDelete(item.id) : goHomepage(item.id)"
          >
            {{ item.name }}
            <van-icon name="close" class="icon" v-if="isEditing" />
          </div>
        </div>
        <div class="channel">
          <div class="my-channel">
            <div>可选频道</div>
          </div>
        </div>
        <div class="channel-btn">
          <div
            class="btn"
            v-for="(item, index) in getChooseChannel"
            :key="index"
            @click="onAdd(item.id)"
          >
            + {{ item.name }}
          </div>
        </div>
      </div>
      <van-overlay :show="channelLoading">
        <div class="loading-wrapper">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </van-overlay>
    </van-popup>
    <van-loading v-if="loading" vertical class="loading" />
    <section v-else>
      <!-- 内容区域 -->
      <plain-text
        v-for="news in newsList"
        :key="news.art_id"
        :title="news.title"
        :commentCount="news.comm_count"
        :author="news.aut_name"
        :timestamp="news.pubdate"
        :images="news.cover.images"
        :id="Number(news.art_id)"
      />
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import * as channel from "@/api/homepage";
export default {
  data() {
    return {
      // 是否正在加载
      loading: false,
      activePath: 0,
      // 弹出层是否显示
      popupShow: false,
      // 是否正在编辑中
      isEditing: false,
      // 频道加载状态
      channelLoading: false,
    };
  },
  computed: {
    ...mapState("homepage", ["newsList", "allChannelList", "channelList"]),
    // 可选频道列表
    getChooseChannel() {
      return this.allChannelList.reduce((prev, cur) => {
        if (!this.channelList.some((item) => item.id === cur.id)) {
          prev.push(cur);
        }
        return prev;
      }, []);
    },
  },
  methods: {
    ...mapActions("homepage", [
      "updateNewsList",
      "updateAllChannelList",
      "updateChannelList",
    ]),
    // 按照新频道列表更新
    async updateNewChannelList(newChannelList) {
      this.channelLoading = true;
      const res = await channel.setChannelList(newChannelList); // { id: string, seq: string }[]
      // 刷新用户频道列表
      await this.updateChannelList();
      this.channelLoading = false;
      this.$notify({
        type: "success",
        message: res.data.message,
      });
    },
    // 可选频道添加到我的频道
    async onAdd(id) {
      const newChannelList = this.channelList
        .concat({ id })
        .map((item, i) => ({ id: item.id, seq: i }));
      this.updateNewChannelList(newChannelList);
    },
    // 我的频道删除
    async onDelete(id) {
      const newChannelList = this.channelList
        .map((item, i) => ({ id: item.id, seq: i }))
        .filter((item) => item.id !== id);
      this.updateNewChannelList(newChannelList);
    },
    // 遮罩层编辑中
    onEditing() {
      this.isEditing = !this.isEditing;
    },
    goSearchPage() {
      this.$router.push({
        path: "/search-page",
      });
    },
    // 1. 请求新闻列表
    // 2. 改路由的query
    async onTabClick(id) {
      this.loading = true;
      await this.updateNewsList(id);
      this.loading = false;
      this.$router.push({
        path: "/",
        query: {
          id,
        },
      });
    },
    // 是否显示弹出层
    showPopup() {
      this.popupShow = !this.popupShow;
    },
    // 从更多跳到主页高亮点击的那一项
    async goHomepage(id) {
      this.activePath = id;
      this.popupShow = false;
      this.onTabClick(id);
    },
  },
  async created() {
    // 获取用户频道列表
    await this.updateChannelList();
    // 1. 按照路由高亮tabs里的tab项
    (this.activePath =
      this.$route.query.id !== undefined
        ? // 1.1 路径有id的时候
          this.$route.query.id
        : // 1.2 路径没有id的时候
          this.channelList[0].id),
      // 按照id请求新闻列表
    await this.updateNewsList(this.activePath);
    await this.updateAllChannelList();
  },
};
</script>

<style lang="less" scoped>
.loading {
  margin-top: 24px;
}
.container {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  header {
    width: 100vw;
    display: flex;
    align-items: center;
    height: 44px;
    box-shadow: 0 2px 3px #eee;

    .tabs {
      flex: 1;
      height: 44px;
      overflow: hidden;
    }

    .feature {
      width: 20px;
      display: block;
      padding: 0 8px;
    }
  }
  .channel-container {
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;

    .channel-btn {
      display: flex;
      flex-wrap: wrap;

      .btn {
        height: 30px;
        line-height: 30px;
        background-color: #eee;
        border-radius: 15px;
        margin: 8px;
        padding: 0 16px;
        font-size: 14x;
        position: relative;
        &.active {
          color: orange;
        }
        .icon {
          position: absolute;
          right: -2px;
          top: -2px;
        }
      }
    }
    .channel {
      margin-top: 50px;
      display: flex;
      justify-content: space-between;

      .edit-btn {
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid red;
        border-radius: 15px;
        color: red;
      }

      .my-channel {
        display: flex;
        line-height: 30px;

        > span {
          font-size: 12px;
          line-height: 30px;
          display: block;
        }
      }
    }
  }
  section {
    flex: 1;
  }
}
.loading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>